<template>
  <div class="container" v-loading="isLoading">
    <el-card>
      <template #header>
        <div class="table_tool">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="showAddOrEdit = true"
            >新增</el-button
          >
        </div>
      </template>
      <el-table :data="tableData" border>
        <el-table-column prop="company" label="单位名称" />
        <el-table-column prop="location" label="工作地点" />
        <el-table-column prop="experience" label="工作年限" />
        <el-table-column prop="contact_phone" label="负责人手机号" />
        <el-table-column prop="contact_wechat" label="负责人微信号" />
        <el-table-column prop="experience" label="职责" show-overflow-tooltip />
        <el-table-column prop="banner" label="宣传图">
          <template slot-scope="{ row }"> 
            <el-image 
              style="width: 150px; height: auto"
              :src="row.banner"
              :preview-src-list="[row.banner]"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120px" align="center">
          <template slot-scope="{ row }">
            <el-button type="text" @click="editById(row.id)"
              >编辑</el-button
            >
            <el-button type="text" class="red" @click="deleteById(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <footer class="footer">
      <el-pagination
        background
        layout="total, sizes, pager, jumper"
        :current-page="searchForm.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="searchForm.page_size"
        :total="tableTotal"
        @size-change="changeSize"
        @current-change="changeCurrent"
      />
    </footer>

    <el-dialog
      :title="(builingForm.$id ? '编辑' : '新增') + '招聘信息'"
      :visible.sync="showAddOrEdit"
      width="1200px"
      @closed="() => $refs['builingForm'].resetFields()"
    >
      <el-form
        :model="builingForm"
        ref="builingForm"
        label-width="5em"
      >
        <el-form-item prop="$id" hidden />

        <el-form-item class="span-2" label="招工单位" prop="company">
          <el-input
            v-model="builingForm.company"
            placeholder="请输入单位"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="工作地点" prop="location">
          <el-input
            v-model="builingForm.location"
            placeholder="请输入工作地点"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="工作薪水" prop="salary">
          <el-input
            v-model="builingForm.salary"
            placeholder="请输入工作薪水"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="工作经验" prop="experience">
          <el-input
            v-model="builingForm.experience"
            placeholder="请输入工作经验"
          ></el-input>
        </el-form-item>

       

        <el-form-item class="span-2" label="手机号" prop="contact_phone">
          <el-input
            v-model="builingForm.contact_phone"
            placeholder="请输入负责人手机号"
          ></el-input>
        </el-form-item>

        <el-form-item class="span-2" label="微信" prop="contact_wechat">
          <el-input
            v-model="builingForm.contact_wechat"
            placeholder="请输入负责人微信"
          ></el-input>
        </el-form-item>

        <el-form-item label="图片" prop="banner">
          <Upload
            v-model="builingForm.banner"
            :file.sync="builingForm.banner"
          />
        </el-form-item>

        <!-- <el-form-item label="岗位职责" prop="description">
          <el-input
            v-model="builingForm.description"
            type="textarea"
            row="6"
            placeholder="请输入岗位职责"
          ></el-input>
        </el-form-item> -->

      </el-form>
      <template #footer>
        <el-button
          type="primary"
          @click="addCommunity('builingForm')"
          :loading="loading.update"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script>
import API from '@/api';
import { table, addOrEdit } from "@/utils/mixins";
import Upload from "@/components/Upload/SingleImage.vue";

export default {
  mixins: [table, addOrEdit],

  components: {
    Upload,
  },

  data: () => ({
    showAddOrEdit:false,
    isLoading: true,

    tableData:[],
    tableTotal: 0,

    builingForm: {
      company:"",//招工单位
      location:"",//工作地点
      salary:"",//薪资
      experience:"",//经验
      contact_phone:"",//负责人手机
      contact_wechat:"",//负责人微信
      description:"",//描述
      banner:""  //轮播图
    },

    searchForm: {
      page: 1, // 当前页码
      per_page: 10, // 每页条数
    },

  }),


  created() {
    this.getList()
  },

  methods:{
    // 获取列表
    getList(){
      this.isLoading=true
      API.getRecruimentList(this.searchForm)
        .then(({data}) => {
          console.log(data)
          let consultList = data.items.map(item=>{
            return {
              id:item.id,
              banner:item.banner,
              company:item.company,
              salary:item.salary,
              location:item.location,
              contact_phone:item.contact_phone.replace(/^(\d{3})\d{4}(\d+)/, '$1****$2'),
              contact_wechat:item.contact_wechat,
              experience:item.experience,
              description:item.description,
            }
          })
          this.tableData=consultList
          this.tableTotal=data.total
        }).catch((err) => {
          this.tableData=[]
          this.tableTotal=0
        }).finally(() =>{
          this.isLoading = false;
        })
    },

    // 分页
    changeSize(val){
      this.searchForm.per_page = val
      this.searchForm.page = 1
      this.getList()
    },

    // 分页
    changeCurrent(val){
      this.searchForm.page = val
      this.getList()
    },

    // 编辑活动
    editById(id){
      this.builingForm.$id=id
      API.getRecruimentDetail(id)
      .then(({data}) => {
        this.builingForm.company=data.company
        this.builingForm.location=data.location
        this.builingForm.salary=data.salary
        this.builingForm.experience=data.experience
        this.builingForm.description=data.description
        this.builingForm.contact_phone=data.contact_phone
        this.builingForm.contact_wechat=data.contact_wechat
        this.builingForm.banner=data.banner
      }).catch((err) => {
      }).finally(() =>{
        this.showAddOrEdit=true
      })
    },

    // 删除活动
    deleteById(id){
      let _that=this
      this.$confirm(`是否删除改条数据？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
      .then(() => {
        API.delRecruiment(id)
        .then(({data}) => {
          this.$message.success("删除成功！");
        }).catch((err) => {
        }).finally(() =>{
          _that.getList()
        })
      })
      .catch(() => {
      });
    },

    // 创建活动
    addCommunity(){
      if(!this.builingForm.company.trim()) return this.$message.error("招工单位不可为空~~")
      if(!this.builingForm.location.trim()) return this.$message.error("工作地点不可为空~~")
      if(!this.builingForm.salary.trim()) return this.$message.error("薪资不可为空~~")
      if(!this.builingForm.experience.trim()) return this.$message.error("工作经验不可为空~~")
      if(!this.builingForm.contact_phone.trim()) return this.$message.error("手机号不可为空~~")
      if(!this.builingForm.contact_wechat.trim()) return this.$message.error("微信不可为空~~")
      if(!this.builingForm.banner.trim()) return this.$message.error("轮播图不可为空~~")

      let data={
        company:this.builingForm.company,
        location:this.builingForm.location,
        salary:this.builingForm.salary,
        experience:this.builingForm.experience,
        description:this.builingForm.description?this.builingForm.description:"",
        contact_phone:this.builingForm.contact_phone,
        contact_wechat:this.builingForm.contact_wechat,
        banner:this.builingForm.banner
      }

      if(this.builingForm.$id){
        let id=this.builingForm.$id
        API.editRecruiment(id,data)
          .then(({data}) => {
            this.$message.success("编辑成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getList()
          })
      }else{
         API.addRecruiment(data)
          .then(({data}) => {
            this.$message.success("新增成功！");
          }).catch((err) => {
          }).finally(() =>{
            this.resetForm()
            this.getList()
          })
      }
    },

    resetForm(){
      this.builingForm.company=""
      this.builingForm.location=""
      this.builingForm.salary=""
      this.builingForm.experience=""
      this.builingForm.contact_phone="" //是否置顶
      this.builingForm.contact_wechat="" //是否开启评论
      this.builingForm.description=""//是否需要审核评论
      this.builingForm.banner=""
      this.showAddOrEdit=false
    },

  }
};
</script>

<style lang="scss" scoped>
    ::v-deep{
    .el-message-box{
      min-width:400px;
    }
    .el-dialog{
      margin-top:2vh !important;
    }
    .el-input .el-input__inner{
      border-radius:4px !important;
    }
    .el-switch{
      transform:translateY(6px)
    }
    .el-message-box__message{
      position: absolute !important;
      top:50% !important;
      left:40px !important;
    }
    .el-form-item__label{
      font-size:16px !important;
    }
  }
</style>
